<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>上传头像</title>
    <!--css style-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="responsive/flexible.css">
    <script src="responsive/flexible.js"></script>
</head>
<body class="personal_center profile">
    <header>
        <a href="javascript:void(0)" class="pre_page"></a>
       上传头像
    </header>

    <section class="upload_area">
        <form action="" class="upload_form">
            <div class="img_area">
                <ul id="img_list" class="img_list mg_wrapper wrapper">
                    <li></li>
                </ul>
            </div>
            <input type="file" id="upload_img" onchange="preview(this)">
            <label href="javascript:void(0)" class="select" for="upload_img" >从相册中选择一张照片</label>
            <input class="confirm" value="确认修改" type="submit">
        </form>

    </section>


</body>
<script>
    function preview(file) {

        var prevBox = document.getElementById('img_list');
        var prevItem=prevBox.getElementsByTagName("li")[0];

        if(file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function(evt) {
                prevItem.innerHTML='<img src="' + evt.target.result + '" />';
            }
            reader.readAsDataURL(file.files[0]);
        } else {
            prevItem.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
        }

    }
</script>
</html>